import React, { useReducer } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Form } from "antd";
import moment from "moment";
import CancelModel from "../../../common/CancelModel";
import addShopPage from "./addShopPage.js";
import FormEdit from "../../../common/FormEdit";

import axios from "axios";
import "./index.css";

const initialState = {
  cancelModelStatus: false,
  toWhere: "",
};
const reducer = (state, action) => {
  console.log("模态框传入", action);
  switch (action.type) {
    case "changeCancelModel":
      return {
        ...state,
        cancelModelStatus: action.status,
      };
    case "changetoWhere":
      return {
        ...state,
        shop: action.name,
      };
    default:
  }
};

export default function EditShop() {
  /**
   * 获取到数据
   */
  let location = useLocation();
  const { state } = location;
  const [form] = Form.useForm();
  let navigation = useNavigate();
  /**
   * 设置取消按钮的模态框
   */
  const [store, dispatch] = useReducer(reducer, initialState);

  /**
   *编辑 后端服务器的方法
   * @returns
   */
  function saveShop(values, bon,method) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: method,
      url: `http://localhost:9102/shop/${bon}`,
      data: {
        ...values,
      },
    })
      .then((data) => {})
      .catch((data) => {});
  }

  /** 格式化数据 */
  function formatData(values) {
    /** 格式化后端需要的数据 */
    const startTime = moment(values.businessHours[0]).format("HH:mm");
    const endTime = moment(values.businessHours[1]).format("HH:mm");
    let nowData = {
      name: values.shopName,
      contact: {
        telephone: values.telephone,
        cellphone: values.cellphone,
        name: values.contactName,
        address: values.contactAddress,
      },
      businessType: values.businessType,
      managementType: values.managementType,
      openingHours: { openTime: startTime, closeTime: endTime },
      businessArea: values.businessArea,
      comment: values.comment,
      version: state.version,
    };
    return nowData;
  }

  const onFinish = (values) => {
    //格式化数据
    const nowData = formatData(values);
    saveShop(nowData, state.businessNo,'put');
  };
  return (
    <div>
      <FormEdit
        form={form}
        onFinish={onFinish}
        initialValues={{
          businessType: state.businessType,
          managementType: state.managementType,
          businessHours: [
            moment(state.openingHours.openTime, "HH:mm"),
            moment(state.openingHours.closeTime, "HH:mm"),
          ],
          shopName: state.name,
          telephone: state.contact.telephone,
          cellphone: state.contact.cellphone,
          contactName: state.contact.name,
          contactAddress: state.contact.address,
          businessArea: state.businessArea,
          comment: state.comment,
        }}
        name="编辑添加页面"
        getFields={addShopPage(state.name)}
        resetFields={() => {
          dispatch({ type: "changeCancelModel", status: true });
        }}
        saveBack={() => {
          form.submit((e) => {
            saveShop(formatData(e), state.businessNo);
          });
          navigation("/poi-manage/list");
        }}
      />
      <CancelModel store={store} dispatch={dispatch} path="/poi-manage/list" />
    </div>
  );
}
